<template>
  <div class="search_box">
    <img src="../../assets/images/logo.png" alt="" />
    <input type="text" placeholder="搜索商品/店铺/种类" @click="$router.push({ path:'/searchPage' })"/>
    <div class="iconfont">
      <span class="iconfont icon-menu" @click="$router.push( { path:'/category'} )"></span>
    </div>
    <b class="iconfont icon-sousuo"></b>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.search_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  position: relative;
  background-color: white;
  input {
    flex: 1;
    display: inline-block;
    height: 30px;
    background-color: #e8ecf0;
    border-radius: 15px;
    font-size: 15px;
    color: #b8c0c5;
    // text-indent: 30px;
    padding-left: 30px;
  }
  b {
    position: absolute;
    top: 14.5px;
    left: 55px;
    color: #b8c0c5;
  }
  img,
  .iconfont {
    flex: 0 0 45px;
    height: 45px;
  }
  .iconfont {
    text-align: center;
    span {
      font-size: 1.5em;
      line-height: 45px;
      color: #9d9d9d;
    }
  }
}
</style>